<template>
  <div class="map">
      <div class="map-gl" id="mapgl"></div>
    <form class="form-wrap">
      <div class="form-item">
        <!-- <button @click="playController">出发/暂停</button> -->
        <button @click="start">开始</button>
        <button @click="pauseAni">暂停</button>
        <button @click="continueAni">继续</button>
        <button @click="cancelAni">终止</button>
      </div>
      <div class="form-item">
      </div>
      <div class="form-item">
      </div>
    </form>
     
  </div>
</template>

<script>

// import BaiduMap from 'vue-baidu-map/components/map/Map.vue'


export default {
  name: "BmapGl",
  data() {
    const marks = []
    // for(let i=0;i<100;i++){
    //   marks.push({lng: Math.random()*40+ 85,lat: Math.random()*30+21})
    //   console.log(marks)
    // }
    return {
      center: {lng: 0, lat: 0},
      zoom: 3,
      ak: 'pPurcozpqQVKnZg8NTG2peBYbxVZj5rx',
      trackAni: null,
      trackFlag: false,
      trackArr: [],
      mapobj: null,
      realPaths: [
            {
                "speed":20,
                "poiType":0,
                "lng":117.143532,
                "lat":31.823004,
                "poiTime":1609567200000,
                "signalIntensity":4,
                "gpsNum":10,
                "direction":120,
                "soc":null
            },
        
            {
                "speed":20,
                "poiType":0,
                "lng":117.128328,
                "lat":31.827635,
                "poiTime":1609568130000,
                "signalIntensity":4,
                "gpsNum":10,
                "direction":120,
                "soc":null
            }
        ],
      paths: [{
                'lng': 116.297611,
                'lat': 40.047363
            }, {
                'lng': 116.302839,
                'lat': 40.048219
            }, {
                'lng': 116.308301,
                'lat': 40.050566
            }, {
                'lng': 116.305732,
                'lat': 40.054957
            }, {
                'lng': 116.304754,
                'lat': 40.057953
            }, {
                'lng': 116.306487,
                'lat': 40.058312
            }, {
                'lng': 116.307223,
                'lat': 40.056379
            }]
    }
  },
  components: {

  },
  computed: {

  },
  mounted() {
      this.loadMapScript();
      
  },
  methods: {
    loadMapScript() {
        var _this = this;
        var _script = document.createElement('script');
        _script.type = 'text/javascript';
        _script.src = 'https://api.map.baidu.com/api?v=1.0&type=webgl&callback=initMap&ak=pPurcozpqQVKnZg8NTG2peBYbxVZj5rx'
        var _trackScript = document.createElement('script');
        _trackScript.type = 'text/javascript';
        _trackScript.src='https://api.map.baidu.com/library/TrackAnimation/src/TrackAnimation_min.js';
        _trackScript.src='https://mapopen.bj.bcebos.com/github/BMapGLLib/TrackAnimation/src/TrackAnimation.min.js';
        
        document.body.appendChild(_trackScript);
        document.body.appendChild(_script);
        window.initMap = () => {
            _this.mapobj = new BMapGL.Map('mapgl')    // 创建Map实例
            _this.mapobj.centerAndZoom(new BMapGL.Point(116.280190, 40.049191), 19)  // 初始化地图,设置中心点坐标和地图级别
            _this.mapobj.enableScrollWheelZoom(true)     // 开启鼠标滚轮缩放
            _this.mapobj.setHeading(64.5)
            _this.mapobj.setTilt(73)
            _this.initTrack();
        }
    },
    initTrack() {
        for (var i = 0; i < this.realPaths.length; i++) {
            this.trackArr.push(new BMapGL.Point(this.realPaths[i].lng, this.realPaths[i].lat));
        }
        console.log(this.trackArr)
        var marker1 = new BMapGL.Marker(this.trackArr[0]);   
        var marker2 = new BMapGL.Marker(this.trackArr[this.trackArr.length - 1]);
        this.mapobj.addOverlay(marker1)
        this.mapobj.addOverlay(marker2)
        var pl = new BMapGL.Polyline(this.trackArr, {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
        setTimeout(() => {
            this.trackAni = new BMapGLLib.TrackAnimation(this.mapobj, pl, {
                overallView: true, // 动画完成后自动调整视野到总览
                tilt: 10,          // 轨迹播放的角度，默认为55
                duration: 20000,   // 动画持续时长，默认为10000，单位ms
                delay: 3000,        // 动画开始的延迟，默认0，单位ms
                zoom: 15,
                // zoom: 17,
            });
            this.start();
        },1000);
    },
    playController(){
        if(this.trackFlag) {
            this.pauseAni();
            this.trackFlag = false;
        }else{
            this.continueAni();
            this.trackFlag = true;
        }
    },
    start () {
        this.trackAni.start();
    },
    pauseAni () {
        this.trackAni.pause();
    },
    continueAni () {
        this.trackAni.continue();
    },
    cancelAni() {
        this.trackAni.cancel(); 
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .map-gl{
    width: 100%;
    height: 500px;
  }
  .form-wrap{
    width: 500px;
    margin: 30px auto;
    text-align: left;
    .form-item{
      display: block;
      width: 100%;
      margin-bottom: 15px;
      input,textarea{
        width: 200px;
      }
    }

  }
</style>
